<template>
  <view v-if="id" class="floating-button">
    <image
      class="btn-icon"
      v-if="cardType === ApplyTypeEnum.PERSON"
      @click="toUnitCard"
      src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/floatIcon/business-card-icon.png"
      mode="scaleToFill"
    />
    <image
      class="btn-icon"
      v-if="cardType === ApplyTypeEnum.UNIT"
      @click="toPersonCard"
      src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/floatIcon/personal-card-icon.png"
      mode="scaleToFill"
    />
  </view>
</template>

<script setup lang="ts">
  import { ApplyTypeEnum } from '@/enums/membershipEnum';
  import { redirectTo } from '@/router';
  import { type PropType } from 'vue';
  import { propTypes } from '@/utils/propTypes';
  import { Toast } from '@/utils';

  const props = defineProps({
    id: propTypes.number,
    cardType: {
      type: Number as PropType<ApplyTypeEnum>,
      required: true,
    },
    isControlCardIn: propTypes.bool.def(false),
  });

  function toUnitCard() {
    !props.isControlCardIn
      ? redirectTo({ name: 'businessCard', options: { id: props.id } })
      : Toast('单位详情暂未开放，查看请联系管理员');
  }

  function toPersonCard() {
    !props.isControlCardIn
      ? redirectTo({ name: 'personCard', options: { id: props.id } })
      : Toast('人脉详情暂未开放，查看请联系管理员');
  }
</script>

<style lang="scss" scoped>
  .floating-button {
    position: fixed;
    top: 65%;
    transform: translateY(-65%);
    right: 40rpx;
    width: 104rpx;
    height: 104rpx;
    z-index: 9;
    .btn-icon {
      width: 100%;
      height: 100%;
    }
  }
</style>
